<template>
<view class="person">
	
	<view class="top-box">
		<image :src="userInfo.info.icon || '/static/logo.png'" style="width: 116upx; height: 116upx; margin-left: 30upx; display: block; border-radius: 100%; flex-shrink: 0;"></image>
		<view style="margin-left: 35upx;" v-if="userInfo.info.phone">
			<view v-if="userInfo.info.nick" style="font-size: 36upx; font-weight: 600; line-height: 60upx; color: #58585a;">Hi,{{userInfo.info.nick}}</view>		
			<view style="font-size: 28upx; line-height: 2; color: #f27b3d;">{{ userInfo.info.phone }}</view>
			<view v-if="day && userInfo.info.vipStatus == 1" style="font-size: 28upx; line-height: 2; color: #f27b3d;">尊敬的VIP会员，剩余{{ day }}天</view>
		</view>
		<view style="height: 116upx; margin-left: 35upx;" v-else>
			<button open-type="getPhoneNumber" lang="zh_CN" @getphonenumber="authPhone" style="font-size: 60upx; font-weight: 600; line-height: 116upx; 
				color: #58585a; background: none; border: none;" class="phoneBtn">请绑定手机号</button>			
		</view>
	</view>
	<view class="person_bottom">
		
		<view class="person_item" @click="turnTo('order')">
			<view class="person_item_left">
				<image src="/static/1.png" style="width: 34upx; height: 40upx;"></image>
			</view>
			<view style="color: #58585a; font-size: 30upx; font-weight: 600; width: 470upx; height: 40upx; line-height: 40upx;">我的订单</view>
			<view class="person_item_right">
				<image src="/static/right.png" style="height: 28upx; width: 13upx;"></image>
			</view>
		</view>
		
		<view class="person_item" @click="turnTo('wallet')">
			<view class="person_item_left">
				<image src="/static/2.png" style="width: 37upx; height: 34upx;"></image>
			</view>
			<view style="color: #58585a; font-size: 30upx; font-weight: 600; width: 470upx; height: 40upx; line-height: 40upx;">我的钱包</view>
			<view class="person_item_right">
				<image src="/static/right.png" style="height: 28upx; width: 13upx;"></image>
			</view>
		</view>
		
		<!-- <view class="person_item" @click="turnTo('about')">
			<view class="person_item_left">
				<image src="/static/3.png" style="width: 34upx; height: 40upx;"></image>
			</view>
			<view style="color: #58585a; font-size: 30upx; font-weight: 600; width: 470upx; height: 40upx; line-height: 40upx;">关于我们</view>
			<view class="person_item_right">
				<image src="/static/right.png" style="height: 28upx; width: 13upx;"></image>
			</view>
		</view> -->
		
		<!-- <view class="person_item" @click="turnTo('help')">
			<view class="person_item_left">
				<image src="/static/4.png" style="width: 34upx; height: 40upx;"></image>
			</view>
			<view style="color: #58585a; font-size: 30upx; font-weight: 600; width: 470upx; height: 40upx; line-height: 40upx;">使用帮助</view>
			<view class="person_item_right">
				<image src="/static/right.png" style="height: 28upx; width: 13upx;"></image>
			</view>
		</view> -->
		
		<view class="person_item" @click="turnTo('fankui')">
			<view class="person_item_left">
				<image src="/static/5.png" style="width: 40upx; height: 37upx;"></image>
			</view>
			<view style="color: #58585a; font-size: 30upx; font-weight: 600; width: 470upx; height: 40upx; line-height: 40upx;">意见反馈</view>
			<view class="person_item_right">
				<image src="/static/right.png" style="height: 28upx; width: 13upx;"></image>
			</view>
		</view>
		
		<view class="person_item" @click="turnTo('jiameng')">
			<view class="person_item_left">
				<image src="/static/6.png" style="width: 42upx; height: 35upx;"></image>
			</view>
			<view style="color: #58585a; font-size: 30upx; font-weight: 600; width: 470upx; height: 40upx; line-height: 40upx;">合作加盟</view>
			<view class="person_item_right">
				<image src="/static/right.png" style="height: 28upx; width: 13upx;"></image>
			</view>
		</view>
		
		<view class="person_item" @click="gongyi">
			<view class="person_item_left">
				<image src="/static/6.png" style="width: 42upx; height: 35upx;"></image>
			</view>
			<view style="color: #58585a; font-size: 30upx; font-weight: 600; width: 470upx; height: 40upx; line-height: 40upx;">公益广告</view>
			<view class="person_item_right">
				<image src="/static/right.png" style="height: 28upx; width: 13upx;"></image>
			</view>
		</view>
	</view>
	<view>
		<ad unit-id="adunit-8c32b1745bbec74e" ad-type="video" ad-theme="white"></ad>
	</view>
</view>
</template>

<script>
import { HTTP } from '../../http.js'
let http = new HTTP;
	export default {
		data() {
			return {
				personImg: '../../static/user.png',
				day: 0,
				userInfo: {
					info: {},
					getInfo: ()=>{						
						let user = uni.getStorageSync('user');
						console.log(user, 'user');
						let date = this.getDate(user.vipDueTime);
						console.log(user.vipStatus == 1 && date, 'user');
						
						if (user.vipStatus == 1 && date) {
							let now = new Date().getTime();
							if (date.getTime() > now) {
								console.log(date.getTime());
								let day = Math.ceil((date.getTime() - now) / 24 / 3600 / 1000);
								this.day = day;
								console.log(this.day);
							} else {
								this.day = 0;
							}
						} else {
							this.day = 0;
						}
						this.userInfo.info = user;
						if(user.nick) user.nick = `${user.nick}(${user.userId})`;
						else user.nick = user.userId;
					}
				}
			}
		},
		onShow() {
			this.userInfo.getInfo();
		},
		methods: {
			getDate(string) {
				try {
					let arr = string.split(' ');
					let s1 = arr[0];
					let s2 = arr[1];
					let brr = [ ...s1.split('-'), ...s2.split(':') ];
					brr.forEach(ele => ele = Number(ele));
					return new Date(brr[0], brr[1] - 1, brr[2], brr[3], brr[4]);
				} catch(e) {
					return null;
				}
			},
			authPhone(e) {
				let sessionKey = this.userInfo.info.sessionKey;
				let encryptedData = e.detail.encryptedData, iv = e.detail.iv;				
				http.request({
					url: `login/decodeWxPhone?sessionKey=${ encodeURIComponent(sessionKey) }&encryptedData=${ encodeURIComponent(encryptedData) }&iv=${ encodeURIComponent(iv) }`,
					method: 'get',
					success: (res) => {
						let user = uni.getStorageSync('user');
						user.phone = res.dataList.phoneNumber;
						this.userInfo.info.phone = res.dataList.phoneNumber;
						uni.setStorage({ key: 'user', data: user });
					}
				});
			},
			turnTo(name) {
				uni.navigateTo({ url: '/pages/index/' + name });
			},
			goBack() {
				uni.navigateBack({ delta: 1 });			
			},
			gongyi() {
				// 在页面中定义激励视频广告
				let videoAd = null
				
				// 在页面onLoad回调事件中创建激励视频广告实例
				if (wx.createRewardedVideoAd) {
				  videoAd = wx.createRewardedVideoAd({
				    adUnitId: 'adunit-9c38086c52e56e3a'
				  })
				  videoAd.onLoad(() => {})
				  videoAd.onError((err) => {})
				  videoAd.onClose((res) => {})
				}
				
				// 用户触发广告后，显示激励视频广告
				if (videoAd) {
				  videoAd.show().catch(() => {
				    // 失败重试
				    videoAd.load()
				      .then(() => videoAd.show())
				      .catch(err => {
				        console.log('激励视频 广告显示失败')
				      })
				  })
				}
			}
		}
	}
</script>

<style>
.person {
	height: 100vh;
	width: 100vw;
	overflow: auto;
	position: relative;
	background: #F7F7F7;
}

.person .phoneBtn::after {
	border: none;
}

.person .top-box {
	width: 100%;
	height: 310upx;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.person_bottom {
	width: 100%;
	background: #FFF;
	border-radius: 30upx 30upx 0upx 0upx;
	padding-top: 30upx;
	box-sizing: border-box;
}

.person_item {
	width: 100%;
	height: 80upx;
	margin: 10upx 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.person_item_left {
	width: 42upx;
	height: 40upx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 50upx;
}

.person_item_right {
	width: 42upx;
	height: 40upx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 50upx;
}
</style>
